import { connect, Dispatch } from 'umi';
import Curmbs from '@/components/Curmbs';
import { FC, useEffect } from 'react';
import * as styles from './style.less';
import UserListForm from './UserListForm';
import UserListTable from './UserListTable';
import { Spin } from 'antd';
import { IUserListData, IUserListModelState } from './interface';
interface IProps {
  dispatch: Dispatch;
  userListData: Partial<IUserListData>;
  total:number
}

const UserList: FC<IProps> = ({ dispatch, userListData }) => {
  //第一次加载页面时渲染
  useEffect(() => {
    //todo 通过dispatch来激活effects中的方法
    dispatch({
      type: 'userList/getUserList',
      params: {
        query: '',
        pagenum: 1,
        pagesize: 10,
      },
    });
  }, []);
  //面包屑导航的数据
  const crumbsConfig = {
    crumb: [
      {
        id: 1,
        title: '用户管理',
      },
      {
        id: 2,
        title: '用户列表',
        path: '/user/list',
      },
    ],
  };
  return (
    <div className={styles.user_list}>
      <Curmbs {...crumbsConfig} />
      <UserListForm dispatch={dispatch}/>
      {/* {userListData ? (
          <UserListTable {...userListData} />
        ) : (
          <Spin size="large" />
        )} */}
      <UserListTable {...userListData}  dispatch={dispatch} />
    </div>
  );
};

export default connect(
  ({ userList }: { userList: IUserListModelState }) => userList,
)(UserList);
